<!DOCTYPE html>
<html>
<head th:include="cultivateWeb/header :: culHeaderCss"></head>
<style>
    .titleEaxm{ margin-bottom: 30px;padding-bottom: 10px;border-bottom: 1px solid #999;}
    .title11{font-weight: bold;font-size: 16px;}
    .mar10{cursor: pointer;font-size: 16px;}
    .showTrue{display:none;color:#005C34;font-weight: bold}
</style>
<body onbeforeunload="return goAway()">
<!-- 顶部导航 -->
<header th:include="cultivateWeb/header :: header"></header>
<link type="text/css" href="/css/cultivateWeb/style/course.css" rel="stylesheet">
<div style="background-color: #f7f7f7; ">
    <div class="layui-container">
        <input th:value="${id}" type="hidden" id="chapterId"/>
        <p style="line-height: 40px">当前位置：<a href="/cultivate/homepage">首页</a> > <a href="/cultivate/study/studyOnline">在线学习</a> ><a th:href="@{'/cultivate/study/studyInfo?id='+${courseId}+'&isTestScores='+${isTestScores}}&taskId=&classId=">学习详情</a>  > 章节练习</p>
    </div>
    <section>
        <div class="layui-container">
            <div style="font-size: 20px; font-weight: bold;margin-bottom:40px;text-align: center;">随机练习，10道题为1组</div>
            <div id="content"></div>
            <!--<div id="contentTrue" style="display: none">2222</div>-->
            <div class="div-1" style="text-align: center">
                <input class="btn1 btn1-block" style="margin:10px auto" id="sub" onclick="question();" value="提交"/>
                <input class="btn1 btn1-block" style="margin:10px auto;display: none" id="change" onclick="change();" value="换一组"/>
            </div>
        </div>
    </section>
</div>

<!-- footer ------------------------------------------------------- -->
<div class="footer" th:include="cultivateWeb/header :: footer"></div>
</body>
<script>
    selChapterList();
    var all = '';
    function selChapterList() {
        ajaxToken("/jzApi/topic/selRandChaTest", 'GET',
            {
                id: $("#chapterId").val()
            }, function (res) {
                tpaperId=res.id;
                var a = '<div>';//题目
                res.forEach(function (item, index, arr) {
                    //你选的答案
                    res.yourChoose='';
                    var list = item.options.split(";;");
                    var b = '';
                    //判断题目类型，写入题目描述
                    if (item.topicTypes == 0) {  //单选
                        //写入题目选项
                        for (var i = 0; i < list.length; i++) {
                            b += '<div class="mar10"><input type="radio" class="marR10 subject" id="' + item.id + '_' + i + '" name="' + item.id + '" value="' + list[i] + '" />'
                                + '<label for="' + item.id + '_' + i + '">' + list[i] + '</label></div>'
                        }
                        a += '<div type="'+item.topicTypes+'" class="titleEaxm" data-id="' + item.id + '" data-index="' + index + '"><div class="title11">' + parseInt(parseInt(index)+parseInt(1))+ '、（单选题）（' + item.score + '分）' + item.contents + '</div>' + b;
                    }
                    //判断题目类型，写入题目描述
                    if (item.topicTypes == 2) { //判断
                        //写入题目选项
                        for (var i = 0; i < list.length; i++) {
                            b += '<div class="mar10"><input type="radio" class="marR10 subject" id="' + item.id + '_' + i + '" name="' + item.id + '"  value="' + list[i] + '" />'
                                + '<label for="' + item.id + '_' + i + '">' + list[i] + '</label></div>'
                        }
                        a += '<div type="'+item.topicTypes+'" class="titleEaxm" data-id="' + item.id + '" data-index="' + index + '"><div class="title11">' +  parseInt(parseInt(index)+parseInt(1)) + '、（判断题）（' + item.score + '分）' + item.contents + '</div>' + b;
                    }
                    if (item.topicTypes == 1) {  //多选
                        //写入题目选项
                        for (var i = 0; i < list.length; i++) {
                            b += '<div class="mar10"><input type="checkbox" class="marR10 subject" id="' + item.id + '_' + i + '" name="' + item.id + '" value="' + list[i] + '" />'
                                + '<label for="' + item.id + '_' + i + '">' + list[i] + '</label></div>'
                        }
                        a += '<div type="'+item.topicTypes+'" class="titleEaxm" data-id="' + item.id + '"  data-index="' + index + '"><div class="title11">' +  parseInt(parseInt(index)+parseInt(1)) + '、（多选题）（' + item.score + '分）' + item.contents + '</div>' + b;
                    }
                    a += '<div class="mar10 showTrue">正确答案：'+item.rightKey+'</div><div class="mar10 showTrue">答案解析：'+item.topicAnalysis+'</div></div>';
                });
                $("#content").html(a);

            }
        )
    }
    function question() {
        $(".showTrue").show();
        $("#sub").hide();
        $("#change").show()
    }
    function change() {
        location.reload()
    }
    countDown();
    var second = 0;
    function countDown() {
        second++;
        setTimeout(countDown, 1000);
    }
    var startTime = formatTime(new Date());
    //离开页面或刷新页面提交学习记录
    function goAway() {
        ajaxToken("/jzApi/learns/addLearns", 'GET',
            {
                chapterId: $("#chapterId").val(),
                times: second,
                startTime: startTime.replace(/\//g, "-"),
                endTime: formatTime(new Date()).replace(/\//g, "-")
            }, function (res) {
            }
        )
    }
      //解决火狐离开页面或刷新页面不兼容问题
    $(window).bind('beforeunload',function() {});
</script>

</html>